<template>
  <div class="container">
    <div class="conferenceDistribution"></div>
  </div>
</template>

<script>
export default {
  name: "conferenceDistribution",
  props: {
    data: Object,
  },
  data() {
    return {};
  },
  methods: {
    setChart() {
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          itemWidth: 12, // 标志图形的长度
          itemHeight: 12, // 标志图形的宽度
          left: "25%",
          top: "center",
          textStyle: {
            color: "#fff",
            fontSize: this.$fontSize(18),
            fontFamily: "Microsoft JhengHei",
          },
          data: this.data.data,
        },
        series: [
          {
            name: "会议分布",
            type: "pie",
            radius: ["30%", "90%"],
            center: ["15%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            label: {
              normal: {
                position: "inner",
                show: false,
              },
            },
            data: this.data.data,
          },
        ],
      };
      let myChart = this.$echarts(this.$el);
      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
  },
  mounted() {
    this.setChart();
  },
};
</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
}

.conferenceDistribution {
  flex-grow: 1;
  height: 150px; /* 根据实际情况设置高度 */
}

.Tist {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
